@import org.silkframework.runtime.plugin.PluginDescription
@import org.silkframework.runtime.plugin.Parameter
@import org.silkframework.runtime.plugin.ParameterType
@import org.silkframework.runtime.plugin.AnyPlugin
@import  org.silkframework.dataset.DatasetPluginAutoConfigurable
@import org.silkframework.runtime.plugin.ParameterType.EnumerationType
@import controllers.core.routes.Assets

@(name: String,
  plugins: Seq[PluginDescription[_]],
  currentObj: Option[AnyPlugin],
  resources: List[String],
  title: String = "Edit Properties",
  submitLabel: String = "OK",
  secondaryLabel: String = "Secondary")(contents: Html)

@dialog(title = title, submitLabel = submitLabel, secondaryLabel = secondaryLabel, width = 500) {
  <div id="plugintabs">
    <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
      <select class="mdl-selectfield__select" id="resource_type_select" name="resource_type_select">
        @for(plugin <- plugins) {
          <option value="@plugin.id">@plugin.label</option>
        }
      </select>
      <label class="mdl-selectfield__label" for="resource_type_select">Resource Type</label>
    </div>
    <script>
      var plugin_dialog_submit_delegates = {};
      // object to hold the different submit functions for each plugin type (e.g., CSV dataset, XML dataset, etc.)
      var plugin_autoconfigurable = {};
    </script>
    @for(plugin <- plugins) {
      @createTab(plugin)
    }
  </div>
  <script>

    $(function() {
      function switch_resource_tab(type_id) {
        $(".resource-tab").hide();
        $("#" + type_id).show();
        if (plugin_autoconfigurable[type_id]) {
          $("#dialog-secondary-button").show();
        } else {
          $("#dialog-secondary-button").hide();
        }
      }

      $("#resource_type_select").change(function() {
        var selected_value = $("#resource_type_select option:selected").val();
        switch_resource_tab(selected_value);
      });

      @for(obj <- currentObj) {
        $("#resource_type_select").val("@obj.plugin.id").change();
      }
      @if(currentObj.isEmpty) {
        var first_plugin_id = '@plugins.head.id';
        $("#resource_type_select").val(first_plugin_id).change();
      } else {
        $("#resource_type_select").prop("disabled", "true");
      }

    });

    function submit() {
      console.log("submit");
      var selected_resource_type = $("#resource_type_select").val();
      plugin_dialog_submit_delegates[selected_resource_type](false, {
        success: function() {
          closeDialog();
        } ,
        error: function(msg) {
          showError(msg)
        }
      });
    }

    function showError(msg) {
      $("#primary_dialog .dialog__error-msg .mdl-alert__content").text(msg);
      $("#primary_dialog .dialog__error-msg").fadeIn();
    }

    function dialog_secondary() {
      var selected_resource_type = $("#resource_type_select").val();
      plugin_dialog_submit_delegates[selected_resource_type](true);
    }

  </script>
  @contents
}

@createTab(plugin: PluginDescription[_]) = {
  <div id="@plugin.id" class="resource-tab">
    <p>
      @plugin.description
    </p>

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="@(plugin.id)_name" name="@(plugin.id)_name" value="@name"  @if(currentObj.isDefined) { disabled="true" } />
      <label class="mdl-textfield__label" for="@(plugin.id)_name">Name</label>
    </div>

    @for(param <- plugin.parameters) {
      @createField(plugin.id, param)
    }

  </div>

  <script type="text/javascript">
    function @(plugin.id)_submit(onlyAutoConfigure, callbacks) {
      // Retrieve the name of the plugin
      var name = $('[name=\'@(plugin.id)_name\']').val();
      if(name.length === 0) {
        showError("Name is empty.");
        return false;
      }

      // Retrieve all plugin parameters
      var parameters = [
        @for(param <- plugin.parameters) {
          { name: '@param.name',
            value: $('[name=\'@(plugin.id)_@(param.name)\']').val()
          },
        }
      ];

      // Submit dialog
      if(!onlyAutoConfigure) {
        savePlugin('@plugin.id', name, parameters, callbacks);
      } else {
        autoConfigure('@plugin.id', name, parameters);
      }

      return true;
    }

    plugin_dialog_submit_delegates['@plugin.id'] = @(plugin.id)_submit
    @if(classOf[DatasetPluginAutoConfigurable[_]].isAssignableFrom(plugin.pluginClass)) {
      plugin_autoconfigurable['@plugin.id'] = true;
    } else {
      plugin_autoconfigurable['@plugin.id'] = false;
    }

  </script>
}

@**
 * Creates a new field for a plugin paramter
 *@
@createField(pluginId: String, param: Parameter) = @{
  param.dataType match {
    case ParameterType.ResourceType | ParameterType.WritableResourceType => createResourceField(pluginId, param)
    case enumType @ ParameterType.EnumerationType(_) => createEnumerationField(pluginId, param, enumType)
    case _ => createTextField(pluginId, param)
  }
}

@createTextField(pluginId: String, param: Parameter) = {
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="@(pluginId)_@(param.name)" name="@(pluginId)_@(param.name)" value="@value(pluginId, param)"/>
    <label class="mdl-textfield__label" for="@(pluginId)_@(param.name)">@param.name</label>
    <div class="mdl-tooltip mdl-tooltip--right" for="@(pluginId)_@(param.name)">
      @param.description
      <br/>
      Expected type: @param.dataType.description
    </div>
 </div>
}

@createEnumerationField(pluginId: String, param: Parameter, enumType: EnumerationType) = {
  <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
    <select class="mdl-selectfield__select" id="@(pluginId)_@(param.name)" name="@(pluginId)_@(param.name)" >
    @for(enumerationValue <- enumType.enumerationValues) {
      <option @if(enumerationValue == value(pluginId, param)) { selected="selected" }>@enumerationValue</option>
    }
    </select>
    <label class="mdl-selectfield__label" for="@(pluginId)_@(param.name)">@param.name</label>
    <div class="mdl-tooltip mdl-tooltip--right" for="@(pluginId)_@(param.name)">
      @param.description
      <br/>
      Expected type: @param.dataType.description
    </div>
  </div>
}

@createResourceField(pluginId: String, param: Parameter) = {
  <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
    <select class="mdl-selectfield__select" id="@(pluginId)_@(param.name)" name="@(pluginId)_@(param.name)" @if(resources.isEmpty) { disabled }>
      @for(resource <- resources) {
        <option @if(resource == value(pluginId, param)) { selected="selected" }>@resource</option>
      }
    </select>
    <label class="mdl-selectfield__label" for="@(pluginId)_@(param.name)">@param.name</label>
    <div class="mdl-tooltip mdl-tooltip--right" for="@(pluginId)_@(param.name)">
      @param.description
      <br/>
      Expected type: @param.dataType.description
    </div>
    @if(resources.isEmpty) {
      <span class="no-data-avaliable">No resources found!</span>
    }
  </div>
}

@**
 * Retrieves the value of a specific parameter
 *@
@value(pluginId: String, param: Parameter) = @{
  // Retrieve parameter value as Object
  val paramObj =
    currentObj match {
      case Some(obj) if obj.plugin.id.toString == pluginId =>
        Option(param(obj))
      case _ =>
        param.defaultValue.flatMap(Option(_))
    }
  // Convert parameter value to string
  val paramType = param.dataType.asInstanceOf[ParameterType[AnyRef]]
  val paramStr = paramObj.map(paramType.toString(_)).getOrElse("")
  paramStr
}